<template>
  <div class="header-content">
<!--    <div class="tab-block">-->
<!--      <div @click="change(1)" :class="tabActive===1?'active':''" class="tab-item left">人才云图</div>-->
<!--      <div @click="change(2)" :class="tabActive===2?'active':''" class="tab-item left">人才项目</div>-->
<!--    </div>-->
    <div class="title">“酒泉人才之家”综合服务平台</div>
<!--    <div class="tab-block">-->
<!--      <div @click="change(3)" :class="tabActive===3?'active':''" class="tab-item right">人才平台</div>-->
<!--      <div @click="change(4)" :class="tabActive===4?'active':''" class="tab-item right">人才服务</div>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  name: "Header",
  props:{
    tabActive:{
      type:Number,
      default:1
    }
  },
  data(){
    return{
      titleWidth:0,
      tabWidth:0
    }
  },
  emits:['tabChange'],
  methods:{
    change(index){
      this.$emit('tabChange',index)
    }
  },
}
</script>

<style scoped lang="scss">
  .header-content{
    width: 100%;
    height: 80px;
    background: url("~@/assets/images/header/header.png") no-repeat center;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    .title{
      color: #fff;
      font-size: 38px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 35%;
      font-weight: bold;
    }
    .tab-block{
      width: 35%;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
      height: 100%;
      .tab-item{
        width: 170px;
        height: 35px;
        margin: 0 30px;
        margin-top: 10px;
        font-size: 16px;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tab-item.active{
        color: #fcf881;
      }

      .tab-item.left{
        background: url("~@/assets/images/header/left-normal.png") no-repeat center;
        background-size: 100% auto;
      }
      .tab-item.right{
        background: url("~@/assets/images/header/right-normal.png") no-repeat center;
        background-size: 100% auto;
      }
      .tab-item.left.active{
        background: url("~@/assets/images/header/left-selected.png") no-repeat center;
        background-size: 100% auto;
      }
      .tab-item.right.active{
        background: url("~@/assets/images/header/right-selected.png") no-repeat center;
        background-size: 100% auto;
      }
    }
  }
</style>
